/* ═══════════════════════════════════════════════════════════════════════════════
   UploadCard — GEMELO VANILLA (hoja de estilo)
   Ficha: design-system/COMPONENTE_UPLOADCARD.md
   Kit React hermano: catalogo-cd/components/UploadCard.jsx
   v1.3 · 2026-10-28 (D21). Copiada del bloque CSS del .jsx — sólo tokens. ESTA HOJA NO REDECLARA NADA de
   Dropzone, Card, Progress, Button, IconButton, BotonPartido, Menu ni Tooltip: cargarlas, en ese orden,
   antes de ésta (ver README § Cómo se monta).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* UNA SOLA FILA en los cuatro estados del hueco y en el listo (v1.3, Ricardo 2026-10-28): glifo centrado sobre
   las dos líneas de texto, y a la derecha la acción. El texto nunca baja de renglón. */
.exds-uc-fila { display: flex; align-items: center; gap: 14px; }

/* El slot izquierdo: EJE ÚNICO de estado. Mismo lugar y tamaño en las nueve superficies. */
.exds-uc-glifo { flex: none; width: 19px; height: 19px; display: flex; }

.exds-uc-txt { flex: 1; min-width: 0; }

/* nombre SIEMPRE en flex (no span inline): su caja la gobierna su 17px, no el line-height del bloque */
.exds-uc-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 var(--fs-body, 14px)/1.2 var(--font-sans); color: var(--fg1); }
.exds-uc-nombre--suelto { flex: none; }

/* línea secundaria SIEMPRE 12.5px/1.5 explícito (sin el /1.5 el marco pierde 4px) */
.exds-uc-sec { font: 400 var(--fs-caption, 12px)/1.5 var(--font-sans); color: var(--fg3); }
.exds-uc-sec--err { color: var(--color-error); }
/* VENCIDO no es FALLIDO: el archivo estaba bien, se le pasó la fecha. Por eso su linea va en ambar
   y no en rojo. El TEXTO semantico sobre neutro toma -deep cuando la base no llega a 4,5:1
   (COMPONENTE_SEMANTICOS.md 0-quinquies, la excepcion del aviso: ambar base = 2,46:1). */
.exds-uc-sec--warn { color: var(--color-warning-deep, #B05B00); }
.exds-uc-pct { flex: none; font: 400 var(--fs-caption, 12px)/1.5 var(--font-sans); color: var(--fg3); }

/* El texto NUNCA baja de renglón (3-quinquies): si no cabe, «…» y el globo del catálogo (Tooltip con
   data-tip-si-recorte) con el texto completo. El envoltorio del globo es de bloque para no romper la fila. */
.exds-tip-wrap.exds-uc-tip { display: block; min-width: 0; max-width: 100%; }
.exds-uc-corte { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La acción a la derecha: en el reposo y el rechazo, un botón; en el error, el BotonPartido sm. */
.exds-uc-acc { display: flex; align-items: center; gap: 8px; flex: none; }

/* El cambio de alto de la casilla al cambiar su contenido se ANIMA con la transición del catálogo, nunca de
   golpe (Ricardo, 2026-10-28): papel 2 de COMPONENTE_MOVIMIENTO.md, la misma duración y curva del hueco del
   AvisoSlot (--motion-base · --ease-default). upload-card.js fija el alto de salida, lo cambia al de llegada
   y retira `data-anima` al terminar; sin movimiento, el cambio es inmediato. */
.exds-uploadcard[data-anima] { overflow: hidden; transition: height var(--motion-base, 250ms) var(--ease-default); }

@media (prefers-reduced-motion: reduce) {
  .exds-uploadcard[data-anima] { transition: none !important; }
  .exds-uploadcard.is-shake { animation: none; }
}

/* LA SACUDIDA del rechazo (v1.7) · UNA vez, ±5/±4/±2 px · papel 5 de COMPONENTE_MOVIMIENTO.md.
   DECISION-FUENTE: Ricardo, 2026-10-29 — «si». Sólo el rechazo al instante (al soltar o elegir), nunca durante
   el arrastre ni en el error tras validar. Es la receta del Input (`exds-input-shake`: --motion-shake · --ease-shake),
   copiada con su nombre como la copian otp y Asistente: el canon no ofrece un keyframe compartido. La marca
   `is-shake` la pone upload-card.js (el kit, su efecto) sólo al ENTRAR en rechazo y la retira al terminar. */
.exds-uploadcard.is-shake { animation: exds-uc-shake var(--motion-shake, 380ms) var(--ease-shake, cubic-bezier(0.36, 0.07, 0.19, 0.97)); }
@keyframes exds-uc-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }  90% { transform: translateX(2px); }
}


/* El <input type=file> real: invisible pero presente en el árbol de accesibilidad para quien
   prefiera activarlo directamente (algunos lectores de pantalla lo prefieren al botón). */
.exds-uc-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }