/* ═══════════════════════════════════════════════════════════════════════════════
   Dropzone — GEMELO VANILLA (hoja de estilo)
   Ficha: design-system/COMPONENTE_DROPZONE.md · Kit React hermano: catalogo-cd/components/Dropzone.jsx
   Copiada selector por selector del bloque CSS del .jsx (2026-08-24) — sólo tokens.
   v1.1 · 2026-10-29: encendido (punteado a tinta + flecha), velo translúcido con desenfoque (v1.3), transición papel 2 y ZONA AMPLIADA.
   DECISION-FUENTE: Ricardo, 2026-10-29 — «1a B · 1b iii · 2 ii» (sobre plans/decisiones/_decision_soltar_archivos_y_pie_cajon_2026-10-29.html).
   ⛔ El borde es de 1px, NO 1.5: iguala la caja de Card (1px solid) para que el swap
   hueco→documento no salte 1px de alto. Cambiar el grosor rompe el swap (ver la ficha).
   ═══════════════════════════════════════════════════════════════════════════════ */

.exds-dropzone {
  position: relative;
  border: 1px dashed var(--color-border-control, #8B92A1);
  border-radius: var(--radius-lg, 16px);
  padding: 18px;
  background: transparent;
  transition: background-color var(--motion-fast, 120ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)),
              border-color var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}

.exds-dropzone[data-hover="true"]:hover { background: var(--color-bg-subtle, #F2F4F6); }

/* v1.1: encendido — el marco pasa el punteado a tinta (el velo lo cubre, pero el borde del marco manda al salir). */
.exds-dropzone[data-dragover="true"] { border-color: var(--color-border-strong, #21272C); }

/* El velo del ENCENDIDO (v1.3): translúcido (bg-subtle 72 %) + blur 8 px, neutro; opaco sin soporte de backdrop-filter. Papel 2 de COMPONENTE_MOVIMIENTO.md
   (apertura/cierre): opacity + transform + border-color, --motion-base con --ease-default en
   las dos direcciones. Entra asentándose de --motion-profundidad-lista a su tamaño. */
.exds-dropzone-velo,
.exds-dropzone-velo-cuerpo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  background: color-mix(in srgb, var(--color-bg-subtle, #F2F4F6) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px dashed var(--color-border-control, #8B92A1);
  border-radius: var(--radius-lg, 16px);
  color: var(--fg1, #0F1419);
  font: 500 var(--fs-body, 14px) var(--font-sans, Inter, sans-serif);
  opacity: 0;
  transform: scale(var(--motion-profundidad-lista, 0.98));
  pointer-events: none;
  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)),
              border-color var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-dropzone-velo svg,
.exds-dropzone-velo-cuerpo svg { flex: none; }

/* v1.3: sin soporte de backdrop-filter el velo cae a opaco (si no, el texto de abajo se encima con «Suelta para subir»). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .exds-dropzone-velo,
  .exds-dropzone-velo-cuerpo { background: var(--color-bg-subtle, #F2F4F6); }
}

/* ZONA AMPLIADA (v1.1): con UNA sola casilla en el contenedor, el cuerpo entero recibe el archivo
   y este velo lo cubre a --space-2 del borde. El contenedor (position: relative; si es estático se le pone
   .exds-dropzone-zona) lleva data-dragover="true" mientras se arrastra un archivo encima. */
.exds-dropzone-zona { position: relative; }
/* v1.2: el velo cubre TODO el cuerpo, sección de botones y espacio vacío incluidos, a --space-2 de cada borde (el pie ya no lo recorta). */
.exds-dropzone-velo-cuerpo { inset: var(--space-2, 8px); z-index: 6; }
/* Una sola regla de encendido para las dos formas del velo (casilla y cuerpo). */
.exds-dropzone[data-dragover="true"] .exds-dropzone-velo,
[data-dragover="true"] > .exds-dropzone-velo-cuerpo {
  opacity: 1;
  transform: none;
  border-color: var(--color-border-strong, #21272C);
}

@media (prefers-reduced-motion: reduce) {
  .exds-dropzone, .exds-dropzone-velo, .exds-dropzone-velo-cuerpo { transition: none !important; }
}