body { font-family: sans-serif; margin: 20px; background: #f5f5f5; } h1 { text-align: center; margin-bottom: 30px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; } .card { background: white; border-radius: 8px; padding: 15px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 10px; } .title { font-size: 14px; font-weight: bold; color: #333; } .card.add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #aaa; cursor: pointer; } .card.add-card:hover { background: #fafafa; border-color: #888; } .plus-icon { font-size: 2em; font-weight: bold; color: #333; } /* Modali */ .modal.hidden { display: none; } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: #fff; padding: 20px; border-radius: 8px; width: 300px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .modal-content h2 { margin-top: 0; font-size: 18px; margin-bottom: 15px; } .modal-content label { display: block; margin-bottom: 10px; font-size: 14px; } .modal-content input { width: 100%; padding: 6px 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } .actions { margin-top: 15px; display: flex; justify-content: flex-end; gap: 10px; } .actions button { padding: 8px 14px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } .actions button:hover { opacity: 0.9; } .actions .danger { background: #e03a3a; color: #fff; } .actions button:not(.danger) { background: #eee; color: #333;