/* -------------------------------------------------------------------------- */
/* Floating labels: CSS puro (compatible con inputs y selects)                 */
/* -------------------------------------------------------------------------- */
.floating-field {
  position: relative;
  width: 100%;
  margin-top: 0.625rem; /* espacio para que el label flotante no choque con el elemento superior */
}

.floating-field > input,
.floating-field > select {
  width: 100%;
  padding-top: 0.525rem;
  padding-bottom: 0.35rem;
  background-color: #fff;
  line-height: 1.25;
}

.floating-field > label {
  position: absolute;
  left: 0.6rem;
  top: 0.85rem;
  padding: 0 0.35rem;
  color: #6b7280;
  background-color: #fff;
  pointer-events: none;
  font-size: 0.95rem;
  line-height: 1;
  transform-origin: left top;
  transition: top 0.15s ease-out, font-size 0.15s ease-out, color 0.15s ease-out;
  max-width: calc(100% - 1.2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estado flotante para inputs de texto/email (requiere placeholder=" ") */
.floating-field > input:focus + label,
.floating-field > input:not(:placeholder-shown) + label,
/* Estado flotante para selects (detecta selección no vacía vía :has()) */
.floating-field > select:focus + label,
.floating-field:has(> select > option:checked:not([value=""])) > label {
  top: -0.55rem;
  font-size: 0.75rem;
  color: black;
  font-weight: 600;
}

.floating-field > input:disabled,
.floating-field > select:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

.floating-field > input:disabled + label,
.floating-field > select:disabled + label {
  background-color: #f3f4f6;
}

/* Mensaje de error dentro de floating-field: no rompe la cuadrícula */
.floating-field > .error-message {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.2;
}

/* Advertencia dinámica para campos con catálogo (marca / submarca) */
.floating-field > .catalog-warning {
  display: block;
  margin-top: 0.35rem;
  color: #ea580c;
  font-size: 0.8rem;
  line-height: 1.25;
}

.floating-field > .catalog-warning.hidden {
  display: none;
}

/* Input marcado en advertencia (borde naranja) */
.floating-field > input.has-warning {
  border-color: #ea580c !important;
}