/* Contenedor del formulario (detail/edit) */
.record {
  position: relative;
}

/* Estado de actualización suave */
.record.is-updating {
  /* Bloquear interacción mientras se recalcula */
  pointer-events: none;
}

/* Fade suave de campos/paneles mientras se actualiza */
.record.is-updating .panel,
.record.is-updating .field,
.record.is-updating .field > .control {
  opacity: 0.55;
  transition: opacity 180ms ease;
}

/* Overlay con mini-loader centrado */
.record.is-updating::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  /* spinner */
  --s: 22px;
  --b: 3px;
  mask:
    radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))) top/var(--s) var(--s),
    conic-gradient(#0000 10%, #000) center/var(--s) var(--s);
  -webkit-mask:
    radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))) top/var(--s) var(--s),
    conic-gradient(#0000 10%, #000) center/var(--s) var(--s);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: spin 800ms linear infinite;
}

@keyframes spin { to { transform: rotate(1turn); } }

/* Lock de altura para evitar “saltos” bruscos (opcional) */
.record.height-lock {
  height: var(--lock-h, auto);
  overflow: hidden;
  transition: height 220ms ease;
}


/* ====== Marca y transiciones ====== */
:root {
  /* Ajusta a tu oro oficial de Century 21 si lo tienes */
  --c21-gold: #c7a76c;   /* <--- cámbialo si manejas un tono exacto */
  --c21-black: #111111;
}

.record {
  position: relative;
}

.record.is-updating {
  pointer-events: none; /* bloquea interacción mientras recalcula */
}

/* Suavizado de contenido */
.record.is-updating .panel,
.record.is-updating .field,
.record.is-updating .field > .control {
  opacity: 0.55;
  transition: opacity 180ms ease;
}

/* Overlay translúcido (oro muy suave) */
.record.is-updating::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(199,167,108,0.09), rgba(199,167,108,0.09));
  pointer-events: none;
}

/* Loader C21: anillo girando + logo centrado (opcional) */
.record.is-updating::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* anillo */
  border-radius: 50%;
  border: 4px solid var(--c21-gold);
  border-right-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 0 0 2px rgba(17,17,17,0.06);
  animation: c21-spin 700ms linear infinite;
}

/* Logo C21 (opcional): pon tu archivo y quita el comentario de background-image */
.record.is-updating .c21-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
  animation: c21-pulse 900ms ease-in-out infinite alternate;
  /* Descomenta y ajusta la ruta de tu logo (ideal SVG) */
  /* background-image: url('../../custom/img/c21-mark.svg'); */
}

/* Si aún no cargas logo, mostramos “C21” tipográfico como fallback */
.record.is-updating .c21-logo::after {
  content: "C21";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--c21-black);
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(closest-side, #fff, #fff 60%, transparent 61%);
  border-radius: 50%;
  border: 2px solid var(--c21-gold);
}

/* Lock de altura para evitar “salto” del formulario */
.record.height-lock {
  height: var(--lock-h, auto);
  overflow: hidden;
  transition: height 220ms ease;
}

/* Animaciones */
@keyframes c21-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes c21-pulse { from { transform: translate(-50%, -50%) scale(0.94); } to { transform: translate(-50%, -50%) scale(1.02); } }