# Zona de subida (C 053)

Categoría: Tarjetas  
Etiquetas: file, upload, dropzone, dashed, light, hover  
Página: https://designforai.dev/es/snippet/card-053

## Prompt

Crea una zona de subida de 320px como label alrededor de un input de archivo oculto: fondo #f8fafc, borde discontinuo 2px #cbd5e1, radio 16px, padding 32px 24px, diseño en columna centrada. Un SVG de flecha de subida de 32px en #64748b, una línea 14px bold "Drop files here or click to browse" en #0f172a y una pista 12px en #94a3b8. En hover el fondo pasa a #eff6ff, el borde a #3b82f6, y el icono se vuelve azul y sube 3px.

## HTML

```html
<label class="card-053">
  <input type="file">
  <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 16V4m0 0l-4 4m4-4l4 4M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2"/></svg>
  <b>Drop files here or click to browse</b>
  <span>PNG, JPG or SVG up to 10 MB</span>
</label>
```

## CSS

```css
.card-053 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 320px;
  padding: 32px 24px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  font-family: system-ui,sans-serif;
  color: #475569;
  text-align: center;
  cursor: pointer;
  transition: background .2s,border-color .2s
}
.card-053 input {
  display: none
}
.card-053 svg {
  color: #64748b;
  margin-bottom: 6px;
  transition: transform .2s,color .2s
}
.card-053 b {
  font-size: 14px;
  color: #0f172a
}
.card-053 span {
  font-size: 12px;
  color: #94a3b8
}
.card-053:hover {
  background: #eff6ff;
  border-color: #3b82f6
}
.card-053:hover svg {
  color: #3b82f6;
  transform: translateY(-3px)
}
.card-053 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```