/* ==========================================================================
   RMA · css/forms.css
   Formularios: campos, estados (hover, foco, error, válido), secciones,
   barra de filtros y selector múltiple de empresas.
   ========================================================================== */

/* ---------- Campo ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.field__req {
  color: var(--c-danger);
}

.field__help {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.field__error {
  color: var(--c-danger);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ---------- Controles ---------- */
.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-text-faint);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--c-mask-600);
}

.input:focus,
.select:focus,
.textarea:focus,
.multiselect__summary:focus-visible {
  outline: none;
  border-color: var(--c-mask-700);
  box-shadow: 0 0 0 3px rgba(194, 116, 44, 0.35);
}

.input[readonly] {
  background-color: var(--c-bg);
  color: var(--c-text-muted);
}

.select:disabled,
.input:disabled {
  background-color: var(--c-bg-sunken);
  color: var(--c-text-faint);
  cursor: not-allowed;
}

.textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.select {
  padding-right: 2.4rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356635d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.1rem;
  cursor: pointer;
}

/* Campo para códigos y números de serie */
.input--code {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.input--code::placeholder {
  text-transform: none;
}

/* ---------- Validación visual ---------- */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: var(--c-danger);
  background-color: #fffafa;
}

.field.is-invalid .input:focus,
.field.is-invalid .select:focus,
.field.is-invalid .textarea:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.22);
}

.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea {
  border-color: #5fae82;
}

/* ---------- Campo con icono o botón dentro ---------- */
.input-group {
  position: relative;
}

.input-group__icon {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  color: var(--c-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.input-group__icon + .input {
  padding-left: 2.6rem;
}

.input-group__btn {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  transform: translateY(-50%);
}

.input-group--btn .input {
  padding-right: 2.9rem;
}

/* ---------- Rejilla y secciones ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.field--full {
  grid-column: 1 / -1;
}

/* Formulario en una sola columna (login, modales) */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-section {
  padding: var(--card-pad);
}

.form-section__head {
  margin-bottom: var(--sp-5);
}

.form-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
}

.form-section__desc {
  margin-top: 0.15rem;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ---------- Valores fijados por la sesión (no editables) ---------- */
.readonly-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

.readonly-box__text {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  line-height: 1.3;
}

.readonly-box__text span {
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.readonly-value {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-text-muted);
  font-weight: 500;
}

.readonly-value span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Barra de filtros ---------- */
.filters {
  padding: var(--card-pad);
}

.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: var(--sp-4);
}

.filters__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ---------- Selector múltiple (empresas) ---------- */
.multiselect {
  position: relative;
}

.multiselect__summary {
  display: flex;
  align-items: center;
  list-style: none;
}

.multiselect__summary::-webkit-details-marker {
  display: none;
}

.multiselect__summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiselect__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: 17rem;
  padding: var(--sp-2);
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.5rem;
  padding: 0.35rem var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.check:hover {
  background: var(--c-bg);
}

.check:first-child {
  margin-bottom: var(--sp-1);
  font-weight: 600;
}

.check input {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  accent-color: var(--c-mask-700);
}

.check__code {
  margin-left: auto;
  padding-left: var(--sp-4);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ---------- Buscador sobre una tabla ---------- */
.table-search {
  flex: 1 1 16rem;
  max-width: 22rem;
}

/* ---------- Datos guardados para futuras solicitudes ---------- */

/* Aviso que ofrece utilizar los datos guardados */
.saved-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--card-pad);
  border: 1px solid #e3c7a8;
  border-radius: var(--r-lg);
  background: var(--c-copper-soft);
}

.saved-banner__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--c-copper);
  color: #fff;
}

.saved-banner__title {
  font-weight: 700;
}

.saved-banner__text {
  margin-top: 0.15rem;
  color: #5c4a39;
  font-size: var(--fs-sm);
}

.saved-banner__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
}

.saved-banner__actions .link {
  min-height: 2.25rem;
  font-size: var(--fs-sm);
}

/* Campo rellenado con un dato guardado: sigue siendo editable */
.field.is-autofilled .input,
.field.is-autofilled .select,
.field.is-autofilled .textarea {
  border-color: #d9b188;
  background-color: var(--c-copper-soft);
}

.field.is-autofilled .field__label::after {
  content: "Dato guardado";
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-sm);
  background: var(--c-copper-soft);
  color: var(--c-copper-strong);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Casilla voluntaria «Guardar estos datos para futuras solicitudes» */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--card-pad);
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.consent:hover {
  border-color: var(--c-mask-600);
}

.consent input {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin: 0.15rem 0 0;
  accent-color: var(--c-mask-700);
}

.consent__title {
  display: block;
  font-weight: 600;
}

.consent__help {
  display: block;
  margin-top: 0.15rem;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* ---------- Requisitos de la contraseña ---------- */
.pw-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem var(--sp-4);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.pw-rule {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--t-fast);
}

.pw-rule__mark {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 50%;
  color: transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.pw-rule__mark .icon {
  width: 0.7rem;
  height: 0.7rem;
  stroke-width: 3.2;
}

.pw-rule.is-ok {
  color: var(--c-success);
}

.pw-rule.is-ok .pw-rule__mark {
  border-color: var(--c-success);
  background: var(--c-success);
  color: #fff;
}

/* ---------- Selector de logo con vista previa ---------- */
.logo-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

/* Vista previa: el logo a los dos tamaños en que se usa en la aplicación */
.logo-picker__preview {
  display: flex;
  align-items: flex-end;
  flex: none;
  gap: var(--sp-2);
}

.logo-picker__preview .logo {
  box-shadow: 0 0 0 1px var(--c-border);
}

.logo-picker__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.logo-picker__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.logo-picker__actions .btn {
  cursor: pointer;
}

.logo-picker__actions .link {
  font-size: var(--fs-sm);
}

/* El campo de archivo real queda oculto; se usa su etiqueta como botón */
.logo-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.logo-picker__input:focus-visible + .btn {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.logo-picker__file {
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Cuenta creada: datos y contraseña inicial ---------- */
.created-user {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.created-user__data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
}

.created-user__data dt {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.created-user__data dd {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Contraseña oculta con sus botones de ver y copiar */
.password-box {
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
}

.password-box .input-group {
  flex: 1;
  min-width: 0;
}

/* Valor que se lee carácter a carácter (sin cambiar mayúsculas) */
.input--mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* ---------- «Solicitud realizada para»: opciones y ficha del usuario ---------- */
.choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.choice__option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}

.choice__option:hover {
  border-color: var(--c-mask-600);
}

/* Opción elegida */
.choice__option:has(input:checked) {
  border-color: var(--c-mask-700);
  background: var(--c-mask-50);
  box-shadow: inset 0 0 0 1px var(--c-mask-700);
}

.choice__option:has(input:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.choice__option.is-disabled {
  border-style: dashed;
  background: var(--c-bg);
  color: var(--c-text-faint);
  cursor: not-allowed;
}

.choice__option input {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  margin: 0.15rem 0 0;
  accent-color: var(--c-mask-700);
}

.choice__option input:focus-visible {
  outline: none; /* el foco se dibuja en toda la opción */
}

.choice__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.choice__title {
  font-weight: 600;
}

.choice__detail {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.choice + .field__error {
  margin-top: var(--sp-2);
}

.titular {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

/* Ficha del usuario seleccionado: datos de solo lectura */
.user-card {
  padding: var(--sp-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

.user-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.user-card__data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.user-card__data dt {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.user-card__data dd {
  font-weight: 600;
  overflow-wrap: anywhere;
}