/*
 * Aiden UI · file-dropzone — CSS module de Arc (registry/components/file-dropzone/file-dropzone.module.css)
 * traducido a clases aui-file-dropzone-<parte>, con las MISMAS variables de kit/foundation.css (necesita
 * foundation.css cargado). Los estados que en Arc son clases (.dragging, .compact, .inside, .isFailed,
 * .uploaded, .failed) aquí son atributos data-* que pone el JS.
 * Los !important solo protegen el input y los botones del CSS agresivo de los paneles.
 */

/* El input original sigue en el formulario (envía su name y valida required) pero no se ve. El selector propio igual. */
.aui-file-dropzone .aui-file-dropzone-native,
.aui-file-dropzone .aui-file-dropzone-input {
  position: absolute !important; left: 50% !important; top: 40px !important; display: block !important;
  width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; pointer-events: none !important;
}
/* Reset de los botones del componente frente al CSS de los paneles. */
.aui-file-dropzone button {
  -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important;
  margin: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important;
  box-shadow: none !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important;
  float: none !important; font-family: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
}
.aui-file-dropzone svg { display: inline-block; flex: 0 0 auto; overflow: visible; }

/* No grid gap: the error row and the file list carry their own spacing, so each can open from a true zero height. */
.aui-file-dropzone { position: relative; display: grid; min-width: 0; color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: left; }
.aui-file-dropzone-zone { position: relative; display: grid; min-width: 0; border-radius: var(--radius-surface); background: var(--surface); transition: background-color var(--duration-standard) var(--ease-standard), border-radius var(--duration-spring) var(--ease-spring); }
/* A folded prompt is a slimmer surface, so its corners step down to the panel radius. */
.aui-file-dropzone-zone[data-compact] { border-radius: var(--radius-panel); }
/* The edge is a drawn stroke, fitted to the perimeter in script, so a drag can close its dashes into one line. */
.aui-file-dropzone-edge { position: absolute; top: .5px; left: .5px; width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
.aui-file-dropzone-edge rect { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3.5 3.5; stroke-dashoffset: 0; transition: stroke var(--duration-fast) var(--ease-standard), stroke-dasharray var(--duration-standard) var(--ease-standard), stroke-dashoffset var(--duration-standard) var(--ease-standard); }
.aui-file-dropzone .aui-file-dropzone-trigger {
  display: flex !important; width: 100% !important; height: auto !important; flex-direction: column; align-items: stretch; justify-content: center;
  border: 0 !important; border-radius: inherit !important; padding: 34px var(--space-5) !important; background: transparent !important;
  color: inherit !important; font: inherit; font-size: inherit !important; font-weight: inherit !important; letter-spacing: var(--tracking-body) !important;
  text-align: center !important; cursor: pointer;
  /* Arc anima el relleno con el muelle «smooth» (sin rebote, 0,4 s). */
  transition: padding .4s var(--ease-standard);
}
.aui-file-dropzone-trigger > * { pointer-events: none; }
.aui-file-dropzone .aui-file-dropzone-trigger:disabled { cursor: not-allowed; opacity: .55; }
.aui-file-dropzone-zone[data-compact] .aui-file-dropzone-trigger { padding-top: 16px !important; padding-bottom: 16px !important; }
.aui-file-dropzone-zone[data-inside][data-rows] .aui-file-dropzone-trigger { padding-bottom: 26px !important; }
.aui-file-dropzone-zone[data-compact][data-inside][data-rows] .aui-file-dropzone-trigger { padding-bottom: 8px !important; }
@media (hover: hover) and (pointer: fine) {
  .aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:hover) { background: var(--surface-muted); }
  .aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:hover) .aui-file-dropzone-edge rect { stroke: var(--text-muted); }
}
/* Sin anillo de foco (decisión de Arc): con teclado, la zona enfocada toma el mismo resalte que al pasar el ratón. */
.aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:focus-visible) { background: var(--surface-muted); }
.aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:focus-visible) .aui-file-dropzone-edge rect { stroke: var(--text-muted); }
/* Color is the only press response: the target never scales. */
.aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:active) { background: var(--surface-muted); }
/* A file over the target closes the dashes into a solid edge and the target breathes, slowly, while it waits. */
.aui-file-dropzone-zone[data-dragging] { background: color-mix(in oklab, var(--accent) 2.5%, var(--surface)); animation: aui-file-dropzone-breathe 2.2s var(--ease-in-out) infinite; }
@keyframes aui-file-dropzone-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
/* Light that follows the pointer: a wash inside, and a brighter stretch of the edge nearest the file. */
.aui-file-dropzone-wash, .aui-file-dropzone-glow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--duration-standard) var(--ease-standard); }
.aui-file-dropzone-wash { background-image: radial-gradient(260px circle at var(--glow-x, 50%) var(--glow-y, 50%), color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%); }
.aui-file-dropzone-glow { padding: 1.5px; background-image: radial-gradient(180px circle at var(--glow-x, 50%) var(--glow-y, 50%), var(--accent), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
[data-dragging] > .aui-file-dropzone-wash, [data-dragging] > .aui-file-dropzone-glow { opacity: 1; }
[data-dragging] .aui-file-dropzone-edge rect { stroke: color-mix(in oklab, var(--accent) 40%, var(--border)); stroke-dasharray: 7 0; stroke-dashoffset: 1.75; }
/* No gaps between the prompt's parts: each slot carries its own space, so a folding slot takes its space with it. */
.aui-file-dropzone-icon-slot, .aui-file-dropzone-note-slot { display: flex; flex-direction: column; overflow: hidden; }
/* Three sheets of paper, the target's one illustration. The slot's top margin is room for them to lift without clipping. */
.aui-file-dropzone-sheets { position: relative; display: block; width: 36px; height: 44px; align-self: center; margin: 10px 0 14px; }
.aui-file-dropzone-sheet {
  --r: 0deg; --x: 0px; --y: 0px;
  position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 0 5px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--text-muted);
  box-shadow: 0 1px 2px oklch(0% 0 0 / .05), 0 3px 8px oklch(0% 0 0 / .04);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transform-origin: 50% 100%;
  transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard);
}
.aui-file-dropzone-sheet::before, .aui-file-dropzone-sheet::after { position: absolute; top: 8px; left: 7px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; content: ""; opacity: .3; }
.aui-file-dropzone-sheet::after { top: 13px; width: 11px; }
.aui-file-dropzone-sheet > svg { transition: transform var(--duration-spring) var(--ease-spring); }
[data-dragging] .aui-file-dropzone-sheet > svg { transform: translateY(-3px); }
.aui-file-dropzone-sheet[data-sheet="back"] { --r: -10deg; --x: -9px; --y: 2px; }
.aui-file-dropzone-sheet[data-sheet="side"] { --r: 10deg; --x: 9px; --y: 2px; }
@media (hover: hover) and (pointer: fine) {
  .aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:hover) .aui-file-dropzone-sheet[data-sheet="back"] { --r: -15deg; --x: -13px; }
  .aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:hover) .aui-file-dropzone-sheet[data-sheet="side"] { --r: 15deg; --x: 13px; }
  .aui-file-dropzone-zone:has(.aui-file-dropzone-trigger:hover) .aui-file-dropzone-sheet[data-sheet="front"] { --y: -2px; }
}
[data-dragging] .aui-file-dropzone-sheet { color: var(--text-secondary); border-color: var(--border-strong); }
.aui-file-dropzone-zone[data-dragging] .aui-file-dropzone-sheet[data-sheet="back"] { --r: -22deg; --x: -20px; --y: -2px; }
.aui-file-dropzone-zone[data-dragging] .aui-file-dropzone-sheet[data-sheet="side"] { --r: 22deg; --x: 20px; --y: -2px; }
.aui-file-dropzone-zone[data-dragging] .aui-file-dropzone-sheet[data-sheet="front"] { --y: -8px; }
/* Full width and centered text: the label box never moves, so an outgoing label leaves from exactly where it was. */
.aui-file-dropzone-label { position: relative; display: block; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
.aui-file-dropzone-label-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
.aui-file-dropzone-hint { margin-top: 6px; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
.aui-file-dropzone-note { display: block; padding-top: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); overflow-wrap: anywhere; }
.aui-file-dropzone-message-slot { overflow: hidden; }
.aui-file-dropzone-error { display: flex; align-items: flex-start; gap: 6px; padding-top: var(--space-3); color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-body); }
/* The icon sits on the first line's optical center, so a wrapped message keeps it at the top. */
.aui-file-dropzone-error > svg { flex: 0 0 auto; margin-top: 3px; }
.aui-file-dropzone-error-copy { position: relative; min-width: 0; flex: 1; }

.aui-file-dropzone .aui-file-dropzone-list { display: grid; min-width: 0; margin: 0 !important; padding: 0; list-style: none !important; container: aui-file-dropzone-list / inline-size; transition: padding .4s var(--ease-standard); }
/* The list's own padding opens with the first row, so the gap under the target never appears in one frame. */
.aui-file-dropzone .aui-file-dropzone-list[data-rows] { padding-top: 4px; }
[data-inside] > .aui-file-dropzone-list { padding-inline: 12px; }
.aui-file-dropzone [data-inside] > .aui-file-dropzone-list[data-rows] { padding-top: 0; padding-bottom: 12px; }
/* Rows animate height; the gap lives inside the clipped row as margin, so a closing row reaches a true zero. */
.aui-file-dropzone .aui-file-dropzone-item { min-width: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.aui-file-dropzone-item::before, .aui-file-dropzone-item::marker { content: none !important; }
/* Una fila que se está yendo ya no es de la lista: no recibe clics. */
.aui-file-dropzone-item[data-leaving] { pointer-events: none; }
.aui-file-dropzone-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 58px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 8px 8px 8px 9px; background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard); }
.aui-file-dropzone-row[data-failed] { border-color: color-mix(in oklab, var(--danger) 26%, var(--border)); }
.aui-file-dropzone-file-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--text-secondary); }
.aui-file-dropzone-thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .06); }
.aui-file-dropzone .aui-file-dropzone-thumb img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; object-fit: cover; }
.aui-file-dropzone-copy { display: grid; min-width: 0; }
.aui-file-dropzone-name { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
.aui-file-dropzone-meta { display: flex; min-width: 0; align-items: center; margin-top: 1px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aui-file-dropzone-dot { padding-inline: 6px; }
/* The outgoing status is measured against this box when it pops out to leave. */
.aui-file-dropzone-phase { position: relative; display: flex; min-width: 0; flex: 1; }
.aui-file-dropzone-state { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
.aui-file-dropzone-state[data-state="uploaded"] { color: var(--text-secondary); }
.aui-file-dropzone-state[data-state="uploaded"] svg { color: var(--success); }
.aui-file-dropzone-state[data-state="failed"] { color: var(--danger); }
.aui-file-dropzone-reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aui-file-dropzone-percent { font-variant-numeric: tabular-nums; }
.aui-file-dropzone-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.aui-file-dropzone-bar-frame { display: block; overflow: hidden; }
.aui-file-dropzone-bar { display: block; height: 4px; margin: 7px 0 2px; overflow: hidden; border-radius: var(--radius-pill); background: var(--border); }
/* The fill slides in from the left instead of scaling, so its rounded end keeps its shape at every value. */
.aui-file-dropzone-bar-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--accent); transform: translateX(-100%); }
.aui-file-dropzone-actions { display: flex; align-items: center; }
.aui-file-dropzone-retry-slot { display: flex; overflow: hidden; }
.aui-file-dropzone-retry-inner { display: flex; padding: 3px 6px 3px 3px; }
.aui-file-dropzone .aui-file-dropzone-retry, .aui-file-dropzone .aui-file-dropzone-remove { display: grid !important; place-items: center; border: 0 !important; padding: 0 !important; color: var(--text-secondary) !important; font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.aui-file-dropzone .aui-file-dropzone-retry { display: flex !important; width: auto !important; height: 30px !important; align-items: center; gap: 5px; border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; padding: 0 12px 0 10px !important; background: var(--surface) !important; color: var(--foreground) !important; font-size: var(--text-xs) !important; font-weight: 500 !important; letter-spacing: var(--tracking-body) !important; white-space: nowrap; }
/* On narrow lists Retry keeps only its icon, so the failure reason keeps the room to be read in full. */
@container aui-file-dropzone-list (max-width: 440px) { .aui-file-dropzone .aui-file-dropzone-retry { width: 30px !important; justify-content: center; padding: 0 !important; } .aui-file-dropzone-retry-label { display: none; } }
/* On the narrowest lists the type icon steps aside for the name and status. */
@container aui-file-dropzone-list (max-width: 300px) { .aui-file-dropzone-row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; } .aui-file-dropzone-file-icon, .aui-file-dropzone-thumb { display: none; } }
.aui-file-dropzone .aui-file-dropzone-remove { width: 32px !important; height: 32px !important; border-radius: var(--radius-pill) !important; background: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  .aui-file-dropzone .aui-file-dropzone-retry:hover { border-color: var(--border-strong) !important; background: var(--surface-muted) !important; }
  .aui-file-dropzone .aui-file-dropzone-remove:hover { background: var(--surface-muted) !important; color: var(--foreground) !important; }
}
/* Sin anillo de foco: con teclado, el botón enfocado toma el resalte del hover. */
.aui-file-dropzone .aui-file-dropzone-retry:focus-visible { border-color: var(--border-strong) !important; background: var(--surface-muted) !important; }
.aui-file-dropzone .aui-file-dropzone-remove:focus-visible { background: var(--surface-muted) !important; color: var(--foreground) !important; }
/* Quick press, spring release. Neither button anchors a floating layer. */
.aui-file-dropzone .aui-file-dropzone-retry:active, .aui-file-dropzone .aui-file-dropzone-remove:active { transform: scale(.97); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
.aui-file-dropzone .aui-file-dropzone-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .aui-file-dropzone-zone, .aui-file-dropzone-edge rect, .aui-file-dropzone-sheet, .aui-file-dropzone-sheet > svg, .aui-file-dropzone-row, .aui-file-dropzone .aui-file-dropzone-retry, .aui-file-dropzone .aui-file-dropzone-remove, .aui-file-dropzone-wash, .aui-file-dropzone-glow, .aui-file-dropzone .aui-file-dropzone-trigger, .aui-file-dropzone .aui-file-dropzone-list { transition: none !important; }
  .aui-file-dropzone-zone[data-dragging] { animation: none; }
  .aui-file-dropzone .aui-file-dropzone-retry:active, .aui-file-dropzone .aui-file-dropzone-remove:active { transform: none; }
}