/* ═══════════════════════════════════════
   ▓ COMPONENTE · Pie de cambios — gemelo vanilla ▓
   v1.0 · 2026-08-23. Ficha: design-system/COMPONENTE_PIE_CAMBIOS.md
   Kit: catalogo-cd/components/PieCambios.jsx

   DESCARTAR / GUARDAR SIN BARRA FLOTANTE. El par de botones —y el contador de lo que
   llevas cambiado— aparecen al ENSUCIAR el formulario y viven AL FINAL DEL CUERPO de
   su fila, no pegados al borde de la pantalla.

   LAS CUATRO REGLAS, y ninguna es opcional:

     1. VIVE AL FINAL DEL CUERPO DE LA FILA — el sitio exacto donde un artículo de
        ayuda pone "Ver el artículo". Si el par sobreviviera al cierre de la fila, con
        seis filas dejaría de estar claro A CUÁL PERTENECE.
     2. NO ESTÁ SIEMPRE. Aparece al tocar el primer campo, con el mismo despliegue de
        250ms que todo lo demás. *Una fila que sólo estás mirando no muestra un
        "Guardar" apagado.*
     3. CERRAR NO DESCARTA. El subtítulo de la fila pasa a "2 cambios sin guardar" y
        los valores siguen ahí al reabrir. Descartar es el único camino de vuelta, y
        es explícito.
     4. UN CAMPO TOCADO NO SE DESCUENTA al volver a su valor original. En 420px,
        perseguir el valor previo campo por campo cuesta más de lo que informa.

   Cosechado del cajón de ajustes el 2026-08-23 (Ricardo aprobó "promover" el 24-ago).

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (colors_and_type.css).
     2. box-sizing: border-box.
     3. El Button del canon para los dos controles: esta hoja NO dibuja botones.
   ═══════════════════════════════════════ */

/* ── EL DESPLIEGUE ───────────────────────────────────────────────────────────
   De 0fr a 1fr: la rejilla mide el contenido sola, así que el pie no necesita que
   nadie le teclee un alto. Un alto tecleado es correcto el día que se escribe y
   miente en cuanto el contador cambia de texto.

   Los dos atributos viven en el ANFITRIÓN y se leen desde CUALQUIER ancestro:
     data-sucio="true"  hay cambios sin guardar  → el pie aparece
     data-ok="true"     se acaba de guardar      → el pie SIGUE visible con el acuse

   ⛔ data-ok TAMBIÉN abre el pie, y no es un descuido: al guardar, el contador pasa a
   "Guardado hace un momento". Si el pie se cerrara en ese instante, el acuse de recibo
   se iría con él y el usuario no vería nunca que su cambio llegó. */
.exds-pcam {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-sucio="true"] .exds-pcam,
[data-ok="true"] .exds-pcam { grid-template-rows: 1fr; }
.exds-pcam-in { overflow: hidden; min-height: 0; }

/* El contenido entra con un pequeño retardo sobre el despliegue: primero se hace el
   sitio y después llega lo que va dentro. Al revés se ve el texto atravesando un
   hueco que todavía se está abriendo. */
.exds-pcam-c {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)),
              transform var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-sucio="true"] .exds-pcam-c,
[data-ok="true"] .exds-pcam-c {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}

/* ── LA FILA · contador a la izquierda, par de botones a la derecha ──────────── */
.exds-pcam-fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  padding-top: var(--space-1, 4px);
}
/* ⛔ LOS BOTONES NO SE ENCOGEN. Si algo tiene que ceder ancho es el contador, que es
   informativo; un botón encogido corta su propia etiqueta — y una etiqueta cortada en
   un botón de guardar es exactamente donde no puede pasar. */
.exds-pcam-fila > button { flex: none; }

/* ── EL CONTADOR ─────────────────────────────────────────────────────────────
   Se queda a la IZQUIERDA del par empujado por un margen automático, no por un hueco
   tecleado que se rompe en cuanto cambia el texto.

   ⛔ SE RECORTA, NO SE PARTE. Sin min-width:0 + ellipsis, "Guardado hace un momento"
   se va a DOS LÍNEAS —medido el 2026-08-24— y empuja el pie a doble altura, con lo que
   dos filas vecinas dejan de alinearse. En 378px útiles con dos botones no cabe entero,
   y un texto de estado que se parte se lee como un fallo de maquetación, no como
   información.

   Tabular porque lleva una cifra que cambia: sin eso, pasar de 9 a 10 cambios mueve
   todo el renglón. */
.exds-pcam-cuenta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--fg3, #5C6B7A);
  font-variant-numeric: tabular-nums;
}

/* ── MOVIMIENTO REDUCIDO ────────────────────────────────────────────────────
   Se apaga el recorrido, no la señal: el pie sigue apareciendo al ensuciarse y el
   acuse sigue llegando, sólo que sin despliegue (INC-405). */
@media (prefers-reduced-motion: reduce) {
  .exds-pcam,
  .exds-pcam-c { transition: none; }
}